{% extends "Cart/base.html" %}

{% block title %}收藏界面{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/3.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script type="text/javascript">
        var PageNumber=1;
        var Pages=1;
        function getPages() {
            $.ajax({
                url:"/product/shoucang/list",
                type:"get",
                success: function f(data) {
                    console.log("getPages:");
                    console.log(data)
                    Pages=data.pages;
                }
            })
        }
        function getFileByPages() {
            $.ajax({
                url:"/product/shoucang/list",
                type: "get",
                data: {"pageNum":PageNumber.toString()},
                success: function f(data) {
                    Pages=data.pages;
                    console.log("getFileByPages:");
                    console.log(PageNumber);
                    console.log("getFileByPages:");
                    console.log(data);
                    $("#total").empty();
                    for(let i=0;i<data.list.length;i++) {
                        let opt= "<div style=\"width: 18%;height: 240px;background-color:white;margin: 6px\">\n"+
                            "<img src=\"../../static/image/detail/"+data.list[i].title.split('-')[0]+".png\" style=\"width: 130px;height:150px;margin-left: 20px;margin-top: 10px\">\n"+
                            "<div style=\"margin-top: 4px;font-size: 20px;padding-left: 15px\">"+
                            "<a style='font-size: 12px'>"+data.list[i].title.split('-')[0]+"-"+data.list[i].title.split('-')[1]+"</a>"+"<br>"+
                            "<button id='quxiao' value='#{id}' onclick='cancelcollection(this.value)' style='font-size: 12px;margin-top: 10px'><img src=\"../../static/image/collection.png\" style='height: 14px;width: 14px;vertical-align: text-bottom'>取消收藏</button>"+
                            "&nbsp"+
                            "<button value='#{pid}' onclick='addcart(this.value)' style='font-size: 12px'><img src=\"../../static/image/car.png\" style='height: 18px;width: 18px;vertical-align: text-bottom'>加入购物车</button>"+
                            "</div>\n"+
                            "</div>";
                        opt=opt.replace(/#{id}/,data.list[i].id);
                        opt=opt.replace(/#{pid}/,data.list[i].bookid);
                        $("#total").append(opt);
                    }
                }
            })
        }
        function currentPage() {
            document.getElementById("currentpage").innerText="(当前第"+PageNumber+"页";
            document.getElementById("totalpage").innerText="共"+Pages+"页)";
        }
        window.onload=function () {
            getFileByPages();
            currentPage();
            /*上一页*/
            document.getElementById("pro").onclick = function () {
                if (PageNumber - 1 > 0) {
                    PageNumber = PageNumber - 1;
                    getFileByPages();
                    currentPage();
                }
            }
            /*下一页*/
            document.getElementById("next").onclick = function () {
                // alert(123);
                console.log(PageNumber);
                console.log(Pages);
                if (PageNumber < Pages) {
                    PageNumber = PageNumber + 1;
                    console.log(PageNumber);
                    getFileByPages();
                    currentPage();
                }
            }
            /*首页*/
            document.getElementById("first").onclick = function () {
                PageNumber = 1;
                // console.log("headPage:"+PageNumber);
                getFileByPages();
                currentPage();
            }
            /*尾页*/
            document.getElementById("last").onclick = function () {
                getPages();
                PageNumber = Pages;
                console.log(PageNumber);
                getFileByPages();
                currentPage();
            }
        }
    </script>
{% endblock %}

{% block body %}
<!--返回首页-->
<div id="fanhui">
    <span id="sp1"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp/
    <span id="sp2"><a style="text-decoration: none;color: black" id="kehuan1" href="shoucang.html">收藏</a></span>
</div>
<!--详细收藏-->
<div id="total">
</div>
<!--分页-->
<div id="fenye">
    <button id="first">首页</button>
    <button id="pro">上一页</button>
    <button id="next">下一页</button>
    <button id="last">尾页</button>
    <a id="currentpage" style="font-size: small"></a>
    <a id="totalpage" style="font-size: small"></a>
</div>
<!--底部-->
<div id="bottom"></div>
<script type="text/javascript">
    $("#guanli_a").click(function () {
        $("#liebiao").toggle();
    });
</script>
<!--取消收藏按钮-->
<script type="text/javascript">
   function cancelcollection(id) {
       console.log(id);
       layui.use('layer', function(){
           var layer = layui.layer;
           layer.confirm('确定要取消收藏?',{icon: 3, title:'取消确认'}, function(index){
               $.ajax({
                   url:"/product/shoucang/delete/"+id,
                   type:'post',
                   dataType:"json",
                   success:function (json) {
                       if(json.state==200){
                           layer.msg(json.msg,{
                                icon: 1,
                                time: 1000
                            },function () {
                                location.href="{{ url_for('product.soucang') }}";
                            });
                       }else {
                           layer.alert("取消收藏失败！",{icon:2,anim:6});
                       }
                   }
               });
               layer.close(index);
            });
       });
   }
</script>
<!--加入购物车按钮-->
<script type="text/javascript">
    function addcart(pid) {
        console.log(pid);
        layui.use('layer', function(){
            var layer = layui.layer;
            $.ajax({
                url:"/product/shocuang/addcart/"+pid,
                type:'post',
                dataType:"json",
                success:function (json) {
                    if(json.state==200){
                        layer.msg("加入购物车成功!",{
                            icon: 1,
                            time: 1000
                        });
                    }else if(json.state==300){
                        layer.msg("此商品已在购物车，快去购买吧!",{
                            icon: 1,
                            time: 1000
                        });
                    }
                }
            });
        });
    }
</script>
{% endblock %}